<template>
<div class="container">
        <!-- 左侧信息栏 -->
        <div class="left-sidebar">
            <div class="company-logo">
                <img class="imgone" :src="'https://58.dt12.cfd/'+ details.detailsList.avatar"></img>
            </div>
            
            <h2 class="company-name">{{ details.detailsList.company_name }}</h2>
            
            <div class="company-email">{{ details.detailsList.email }}</div>
            
            <div class="client_sub_titles">
                  <div class="client_sub_title">
                    <img class="img-icon" src="../../public/img/work/dagou.png"></img>
                    <span>本人確認済み</span>
                  </div>
                  <div class="client_sub_title">
                    <img class="img-icon" src="../../public/img/work/dagou.png"></img>
                    <span>発注ルールチェック未回答</span>
                  </div>
                </div>
            
            <div class="stat-row">
                <div class="icon">
                    <img class="imgtwo" style="width: 20px !important;" src="../../public/img/work/xing.png"></img>
                </div>
                <div class="label">総合評価</div>
                <div class="value">5.0</div>
            </div>
            
            <div class="stat-row">
                <div class="icon">
                    <img class="imgtwo" src="../../public/img/work/woshou.png"></img>
                </div>
                <div class="label"> プロジェクト完了率</div>
                <div class="value">{{ details.detailsList.company_completion_rate }}</div>
            </div>
            
            <div class="login-date">
                <span style="font-weight: 600;">登录日</span>
                <span>2023年10月15日</span>
            </div>
            
            <div class="address">
                {{ details.detailsList.address }}
            </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="right-content">
            <div class="tabs">
                <button class="tab active" @click="switchTab('overview')">概况</button>
                <button class="tab" @click="switchTab('recruitment')">招聘</button>
            </div>
            
            <!-- 概况内容 -->
            <div id="overview-content" class="tab-content">
                <div class="section-title">会社概要</div>
                
                <div class="rich-text-content" v-html="details.content"></div>
                
                <div class="section-title">評価</div>
                
                <div class="rating-section">
                    <div class="rating-icon">
                        <img class="imgtwo" style="width: 20px !important;" src="../../public/img/work/xing.png"></img>
                    </div>
                    <div class="rating-text">総合評価</div>
                    <div class="rating-value">{{ companyComprehensive.grade }}</div>
                    <div class="stars" v-for="(item, index) in companyComprehensive.list" :key="index">
                        <img class="imgtwo" src="../../public/img/work/manxing.png"></img>
                    </div>
                    <img v-if="companyComprehensive.start" class="imgtwo" src="../../public/img/work/banxing.png"></img>
                </div>
                
                <div class="rating-items">
                    <div class="rating-item">
                        <div class="rating-item-title">要望</div>
                        <div class="rating-item-value">{{ companyAsk.grade }}</div>
                        <div class="stars">
                            <div class="item-stars" v-for="(item, index) in companyAsk.list" :key="index">
                                <img class="imgstree" src="../../public/img/work/manxing.png"></img>
                            </div>
                            <img v-if="companyAsk.start" class="imgtwo" src="../../public/img/work/banxing.png"></img>
                        </div>
                    </div>
                    
                    <div class="rating-item">
                        <div class="rating-item-title">クオリティ</div>
                        <div class="rating-item-value">{{ companyQuality.grade }}</div>
                        <div class="stars">
                            <div class="item-stars" v-for="item in companyQuality.list" :key="index">
                                <img class="imgstree" src="../../public/img/work/manxing.png"></img>
                            </div>
                            <img v-if="companyQuality.start" class="imgtwo" src="../../public/img/work/banxing.png"></img>
                        </div>
                    </div>
                    
                    <div class="rating-item">
                        <div class="rating-item-title">スケジュール</div>
                        <div class="rating-item-value">{{ companySchedule.grade }}</div>
                        <div class="stars">
                            <div class="item-stars" v-for="item in companySchedule.list" :key="index">
                                <img class="imgstree" src="../../public/img/work/manxing.png"></img>
                            </div>
                            <img v-if="companySchedule.start" class="imgtwo" src="../../public/img/work/banxing.png"></img>
                        </div>
                    </div>
                    
                    <div class="rating-item">
                        <div class="rating-item-title">コミュニケーション</div>
                        <div class="rating-item-value">{{ companyExchange.grade }}</div>
                        <div class="stars">
                            <div class="item-stars" v-for="item in companyExchange.list" :key="index">
                                <img class="imgstree" src="../../public/img/work/manxing.png"></img>
                            </div>
                            <img v-if="companyExchange.start" class="imgtwo" src="../../public/img/work/banxing.png"></img>
                        </div>
                    </div>
                    
                    <div class="rating-item">
                        <div class="rating-item-title">パートナーシップ</div>
                        <div class="rating-item-value">{{ companyPartner.grade }}</div>
                        <div class="stars">
                            <div class="item-stars" v-for="item in companyPartner.list" :key="index">
                                <img class="imgstree" src="../../public/img/work/manxing.png"></img>
                            </div>
                            <img v-if="companyPartner.start" class="imgtwo" src="../../public/img/work/banxing.png"></img>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 招聘内容 -->
            <div id="recruitment-content" class="tab-content" style="display: none;">
                <!-- <div class="job-list">
                    <div class="job-item">
                        <h3 class="job-title">Webデザイナー</h3>
                        <div class="job-meta">
                            <span><i class="fas fa-map-marker-alt"></i> 神奈川県</span>
                            <span><i class="fas fa-briefcase"></i> 正社員</span>
                            <span><i class="fas fa-yen-sign"></i> <span class="job-salary">月給30万～40万円</span></span>
                        </div>
                        <p class="job-description">当社のWebサイトやECサイトのデザインを担当していただきます。UI/UXデザインの経験がある方優遇。</p>
                    </div>
                    
                    <div class="job-item">
                        <h3 class="job-title">マーケティング担当</h3>
                        <div class="job-meta">
                            <span><i class="fas fa-map-marker-alt"></i> 東京都</span>
                            <span><i class="fas fa-briefcase"></i> 正社員</span>
                            <span><i class="fas fa-yen-sign"></i> <span class="job-salary">月給35万～45万円</span></span>
                        </div>
                        <p class="job-description">ブランドのマーケティング戦略の立案と実行を担当。Sマーケティングやインフルエンサーマーケティングの経験がある方優遇。</p>
                    </div>
                    
                    <div class="job-item">
                        <h3 class="job-title">販売スタッフ</h3>
                        <div class="job-meta">
                            <span><i class="fas fa-map-marker-alt"></i> 神奈川県</span>
                            <span><i class="fas fa-briefcase"></i> パートタイム</span>
                            <span><i class="fas fa-yen-sign"></i> <span class="job-salary">時給1,200円～1,500円</span></span>
                        </div>
                        <p class="job-description">直営店での接客販売業務。ファッションに関心があり、接客が好きな方大歓迎。</p>
                    </div>
                </div> -->
                
                <!-- <div class="pagination">
                    <button class="pagination-button active">1</button>
                    <button class="pagination-button">2</button>
                    <button class="pagination-button">3</button>
                    <button class="pagination-button"><i class="fas fa-chevron-right"></i></button>
                </div> -->
            </div>
        </div>
    </div>

</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref,onMounted} from 'vue';
import { ElMessage } from 'element-plus';
import { jobsApi} from '../api/index.js';
import richText from '../util/richTextUtil.js';

const route = useRoute();

const details = ref({
        detailsList:[],
        content:'',
    });
    //公司评分
    //综合评分
    const companyComprehensive =ref({
        list:0,
        start:false,
        grade:null,
    })
    //要求
    const companyAsk =ref({
        list:0,
        start:false,
        grade:null,
    })
    //质量
    const companyQuality =ref({
        list:0,
        start:false,
        grade:null,
    })
    //日程安排
    const companySchedule =ref({
        list:0,
        start:false,
        grade:null,
    })
    //交流
    const companyExchange =ref({
        list:0,
        start:false,
        grade:null,
    })
    //伙伴关系
    const companyPartner =ref({
        list:0,
        start:false,
        grade:null,
    })
    

onMounted(() => {
   if (route.query && route.query.id) {
    initData(route.query.id);
  } else {
    console.error('路由参数 id 不存在');
  }
});



const initData = async (jobId) => {
        console.log('sss',jobId)
      try {
        const res = await jobsApi.CompanyDetails({company_id:jobId})
        if (res.code === 1) {
            details.value.detailsList = res.data;
            details.value.content = richText.formatRichText(res.data.company_introduce);

            //处理评分 判断评分的整数和小数部分
            const score = parseFloat(res.data.company_assess);
            const integerPart = Math.floor(score); // 整数部分
            const hasDecimal = score % 1 !== 0; // 是否有小数部分
            const grade1 = Number.isInteger(score)?score.toFixed(1):score.toString();

            const score2 = parseFloat(res.data.company_request);
            const integerPart2 = Math.floor(score2); // 整数部分
            const hasDecimal2 = score2 % 1 !== 0; // 是否有小数部分
            const grade2 = Number.isInteger(score2)?score2.toFixed(1):score2.toString();

            const score3 = parseFloat(res.data.company_quality);
            const integerPart3 = Math.floor(score3); // 整数部分
            const hasDecimal3 = score3 % 1 !== 0; // 是否有小数部分
            const grade3 = Number.isInteger(score3)?score3.toFixed(1):score3.toString();

            const score4 = parseFloat(res.data.company_appendix);
            const integerPart4 = Math.floor(score4); // 整数部分
            const hasDecimal4 = score4 % 1 !== 0; // 是否有小数部分
            const grade4 = Number.isInteger(score4)?score4.toFixed(1):score4.toString();

            const score5 = parseFloat(res.data.company_communicate);
            const integerPart5 = Math.floor(score5); // 整数部分
            const hasDecimal5 = score5 % 1 !== 0; // 是否有小数部分
            const grade5 = Number.isInteger(score5)?score5.toFixed(1):score5.toString();

            const score6 = parseFloat(res.data.company_partnership);
            const integerPart6 = Math.floor(score6); // 整数部分
            const hasDecimal6 = score6 % 1 !== 0; // 是否有小数部分
            const grade6 = Number.isInteger(score6)?score6.toFixed(1):score6.toString();

            //将评分变成数组渲染，并处理评分数值
            companyComprehensive.value = {
                list: Array.from({ length: integerPart }, (_, i) => i + 1), // 创建 [1, 2, 3, ...] 的数组
                start: hasDecimal,
                grade:grade1
              };
            companyAsk.value = {
                list: Array.from({ length: integerPart2 }, (_, i) => i + 1), // 创建 [1, 2, 3, ...] 的数组
                start: hasDecimal2,
                grade:grade2
              };

            companyQuality.value = {
                list: Array.from({ length: integerPart3 }, (_, i) => i + 1), // 创建 [1, 2, 3, ...] 的数组
                start: hasDecimal3,
                grade:grade3
              };
            companySchedule.value = {
                list: Array.from({ length: integerPart4 }, (_, i) => i + 1), // 创建 [1, 2, 3, ...] 的数组
                start: hasDecimal4,
                grade:grade4
              };

            companyExchange.value = {
                list: Array.from({ length: integerPart5 }, (_, i) => i + 1), // 创建 [1, 2, 3, ...] 的数组
                start: hasDecimal5,
                grade:grade5
              };
            companyPartner.value = {
                list: Array.from({ length: integerPart6 }, (_, i) => i + 1), // 创建 [1, 2, 3, ...] 的数组
                start: hasDecimal6,
                grade:grade6
              };

        } else {
            ElMessage.error(res.msg || '职位详情获取失败')
        }
    } catch (error) {
        ElMessage.error('职位详情获取失败')
    } 
    };

// 切换选项卡功能
        const switchTab=(tabName)=> {
            // 隐藏所有内容
            document.getElementById('overview-content').style.display = 'none';
            document.getElementById('recruitment-content').style.display = 'none';
            
            // 移除所有选项卡的活动状态
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            
            // 显示选中的内容并设置活动状态
            if (tabName === 'overview') {
                document.getElementById('overview-content').style.display = 'block';
                tabs[0].classList.add('active');
            } else {
                document.getElementById('recruitment-content').style.display = 'block';
                tabs[1].classList.add('active');
            }
        }
        
        // 分页功能
        document.querySelectorAll('.pagination-button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.pagination-button').forEach(btn => {
                    btn.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
</script>

<style scoped>
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Meiryo, system-ui, -apple-system, sans-serif;
        }
        
        body {
            /* background-color: #f5f5f5; */
            color: #333;
            line-height: 1.6;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            gap: 30px;
            margin-top: 40px;
        }
        /* 图片样式 */
        .imgone{
            width:184px;
        }
        .imgtwo{
            width: 25px;
        }
        .imgstree{
            width: 15px;
        }
        /* 小图标 */
        .img-icon{
            width: 13px;
            height: 13px;
        }

        /* 左侧样式 */
        .left-sidebar {
            flex: 0 0 22%;
            background: white;
            border-radius: 12px;
            /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
            padding: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .company-logo {
            width: 120px;
            height: 120px;
            border-radius: 8px;
            /* background: linear-gradient(135deg, #0068b7 0%, #004d8c 100%); */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: white;
            font-size: 40px;
        }
        
        .company-name {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            color: #0068b7;
            line-height: 1.4;
        }
        
        .company-email {
            color: #666;
            margin-bottom: 25px;
            font-size: 15px;
        }
        .client_sub_title {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: #666;
        }
        .icon-row {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 15px;
        }
        
        .icon-row .icon {
            width: 24px;
            height: 24px;
            color: #0068b7;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .icon-row .text {
            flex: 1;
            font-size: 15px;
        }
        
        .stat-row {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 12px;
            margin-top: 30px;
            padding: 0 20px;
        }
        
        .stat-row .icon {
            width: 20px;
            height: 20px;
            color: #0068b7;
            margin-right: 8px;
        }
        
        .stat-row .label {
            flex: 1;
            font-size: 14px;
        }
        
        .stat-row .value {
            font-weight: bold;
            color: #0068b7;
        }
        
        .login-date {
            width: 100%;
            margin: 20px 0 15px;
            font-size: 14px;
            color: #666;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }
        
        .address {
            width: 100%;
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            padding: 0 20px;
        }
        
        /* 右侧样式 */
        .right-content {
            flex: 1;
            background: white;
            border-radius: 12px;
            /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
            overflow: hidden;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #e0e0e0;
            margin-left: 30px;
        }
        
        .tab {
            padding: 15px 25px;
            font-size: 16px;
            /* font-weight: 600; */
            color: #333;
            background: none;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            transition: all 0.3s;
            /* border-bottom: 3px solid transparent; */
        }
        
        .tab.active {
            color: #0068b7;
            /* border-bottom:none; */
            border-bottom: 3px solid #0068b7;
        }
        
        .tab-content {
            padding: 30px;
        }
        
        /* 概况样式 */
        .section-title {
            background-color: #f7f7f7;
            border-color: #e5e5e5 #e5e5e5 #ccc #0068b7;
            border-style: solid;
            border-width: 1px 1px 1px 5px;
            box-shadow: inset 0 1px #fff;
            padding: 5px 20px;
            font-size: 15px;
            /* font-weight: 600; */
            margin-bottom: 20px;
        }
        
        .rich-text-content {
            line-height: 1.8;
            margin-bottom: 30px;
            color: #444;
        }
        
        .rating-section {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            gap: 15px;
        }
        
        .rating-icon {
            width: 24px;
            height: 24px;
            color: #0068b7;
        }
        
        .rating-text {
            font-size: 16px;
            font-weight: 500;
        }
        
        .rating-value {
            font-size: 20px;
            font-weight: bold;
            color: #0068b7;
        }
        
        .stars {
            display: flex;
            justify-content: center;
            gap: 3px;
        }
        .item-stars{
            display: flex;
        }
        
        .star {
            color: #ffc107;
        }
        
        .rating-items {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .rating-item {
            background: #f9f9f9;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }
        
        .rating-item-title {
            font-size: 14px;
            margin-bottom: 10px;
            color: #666;
        }
        
        .rating-item-value {
            font-size: 18px;
            font-weight: bold;
            color: #0068b7;
            margin-bottom: 8px;
        }
        
        /* 招聘样式 */
        .job-list {
            margin-bottom: 30px;
        }
        
        .job-item {
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }
        
        .job-item:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-color: #0068b7;
        }
        
        .job-title {
            font-size: 18px;
            font-weight: 600;
            color: #0068b7;
            margin-bottom: 10px;
        }
        
        .job-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #666;
        }
        
        .job-description {
            color: #444;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .job-salary {
            font-weight: 600;
            color: #28a745;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        
        .pagination-button {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ddd;
            background: white;
            color: #333;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .pagination-button:hover {
            background: #f5f5f5;
        }
        
        .pagination-button.active {
            background: #0068b7;
            color: white;
            border-color: #0068b7;
        }
        
        .pagination-button:first-child {
            border-radius: 5px 0 0 5px;
        }
        
        .pagination-button:last-child {
            border-radius: 0 5px 5px 0;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            .left-sidebar {
                width: 100%;
                margin-bottom: 20px;
            }
            
            .rating-items {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .rating-items {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .job-meta {
                flex-direction: column;
                gap: 8px;
            }
        }
        
        @media (max-width: 480px) {
            .rating-items {
                grid-template-columns: 1fr;
            }
            
            .rating-section {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
        }
</style>